<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <base th:href="@{/}">
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>Document</title>
    <link rel="stylesheet" href="static/css/minireset.css"/>
    <link rel="stylesheet" href="static/css/common.css"/>
    <link rel="stylesheet" href="static/css/cart.css"/>
    <link rel="stylesheet" href="static/css/bookManger.css"/>
</head>
<body>
<div class="header">
    <div class="w">
        <div class="header-left">
            <a href="index.html">
                <img src="static/img/logo.gif" alt=""
                /></a>
            <h1>图书管理系统</h1>
        </div>
        <div class="header-right" th:include="segment/admin-navigator :: navigator"></div>
    </div>
</div>
<div class="list" id="app">
    <div class="w">
        <div class="add">
            <a href="bookManager?method=toAddBookPage">添加图书</a>
        </div>
        <table>
            <thead>
            <tr>
                <th>图片</th>
                <th>商品名称</th>
                <th>价格</th>
                <th>作者</th>
                <th>销量</th>
                <th>库存</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody th:if="${#lists.isEmpty(data.list)}">
            <tr>
                <td colspan="7">图书列表为空，请先添加图书！！！</td>
            </tr>
            </tbody>
            <tbody th:unless="${#lists.isEmpty(data.list)}">
            <tr th:each="book:${data.list}">
                <td>
                    <img th:src="@{static/uploads/{imgPath}(imgPath=${book.imgPath})}" th:alt="${book.imgPath}"/>
                </td>
                <td th:text="${book.bookName}"></td>
                <td th:text="${book.price}"></td>
                <td th:text="${book.author}"></td>
                <td th:text="${book.sales}"></td>
                <td th:text="${book.stock}"></td>
                <td>
                    <a th:href="@{bookManager(method='toAddBookPage',id=${book.bookId})}">修改</a>
                    <a th:href="@{bookManager(method='removeBook', id=${book.bookId})}" class="del">删除</a>
                </td>
            </tr>

            </tbody>
        </table>
        <div class="footer">
            <!--   引用分页组件  -->
            <div class="footer-right"
                 th:include="segment/footer :: pagination('bookManager?method=toBookManagerPage')"></div>
        </div>
    </div>
</div>
<div class="bottom">
    <div th:include="segment/footer :: contact"></div>
    <div th:include="segment/footer :: copyright"></div>
</div>
<script src="static/script/vue.js"></script>
<script>

    const app = new Vue({
        el: "#app",
        data: {
            toPage: [[${data.currentPage}]]
        },
        methods: {
            goPage() {
                // 校验toPage的格式是否正确
                let reg = /^[1-9][0-9]*$/
                if (reg.test(this.toPage)) {
                    // 发送请求携带请求参数
                    location.href = "bookManager?method=toBookManagerPage&currentPage=" + this.toPage + "&pageSize=" + 10
                } else {
                    alert("请输入正确的页数")
                }
            }
        }
    })
</script>
</body>
</html>
